<template>
  <div>
    <!-- 登录状态管理 -->
    <div v-if="!isLoggedIn" class="login-wrapper">
      <LoginPage @login-success="handleLoginSuccess" />
    </div>
    
    <!-- 主应用内容 -->
    <div v-else class="app-container">
      <el-container>
        <el-header class="header-gradient">
          <img src="/logo.png" class="logo" />
          <span class="title">学生用户画像管理系统</span>
          <div class="user-info">
            <el-dropdown @command="handleLogout">
              <span class="el-dropdown-link">
                {{ currentUser?.name || currentUser?.username }}
                <el-tag v-if="currentUser?.role" size="small" :type="currentUser.role === 'admin' ? 'warning' : 'primary'" style="margin-left: 8px;">
                  {{ currentUser.role === 'admin' ? '管理员' : '学生' }}
                </el-tag>
                <el-icon class="el-icon--right"><arrow-down /></el-icon>
              </span>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item command="logout">退出登录</el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </div>
        </el-header>
        <el-main>
          <el-row :gutter="20">
            <el-col :span="14">
              <el-card class="main-card">
                <StudentList />
              </el-card>
            </el-col>
            <el-col :span="10">
              <el-card class="main-card chat-card">
                <iframe
                  src="https://udify.app/chatbot/qsLFVCR86iYCKwSi"
                  style="width: 100%; height: 100%; min-height: 700px; border: none; border-radius: 12px; box-shadow: 0 2px 12px #b3c0d1;"
                  allow="microphone"
                ></iframe>
              </el-card>
            </el-col>
          </el-row>
          <el-row style="margin-top: 32px">
            <el-col :span="24">
              <KnowledgeSegmentManager />
            </el-col>
          </el-row>
        </el-main>
      </el-container>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { ElMessage } from 'element-plus';
import { ArrowDown } from '@element-plus/icons-vue';
import StudentList from './components/StudentList.vue';
import KnowledgeSegmentManager from './components/KnowledgeSegmentManager.vue';
import LoginPage from './components/LoginPage.vue';

const isLoggedIn = ref(false);
const currentUser = ref(null);

// 检查是否已有登录状态
onMounted(() => {
  checkLoginStatus();
});

const checkLoginStatus = () => {
  const userInfoStr = localStorage.getItem('userInfo');
  if (userInfoStr) {
    try {
      const userInfo = JSON.parse(userInfoStr);
      currentUser.value = userInfo;
      isLoggedIn.value = true;
      console.log('当前用户角色:', userInfo.role);
    } catch (error) {
      console.error('解析用户信息失败:', error);
      localStorage.removeItem('userInfo');
    }
  }
};

const handleLoginSuccess = (userInfo) => {
  currentUser.value = userInfo;
  isLoggedIn.value = true;
  console.log('登录成功，用户角色:', userInfo.role);
};

const handleLogout = () => {
  localStorage.removeItem('userInfo');
  isLoggedIn.value = false;
  currentUser.value = null;
  ElMessage.success('已退出登录');
};
</script>

<style>
.app-container {
  min-height: 100vh;
  background: linear-gradient(135deg, #e0e7ff 0%, #f0f9ff 100%);
}

.header-gradient {
  background: linear-gradient(90deg, #409eff 0%, #66b1ff 100%);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.user-info {
  display: flex;
  align-items: center;
}

.user-info .el-dropdown-link {
  color: #fff;
  cursor: pointer;
}

.user-info .el-dropdown-link:hover {
  color: #f0f0f0;
}

.login-wrapper {
  width: 100%;
  height: 64px;
  box-shadow: 0 2px 8px #dbeafe;
}

.logo {
  height: 40px;
  margin-right: 16px;
}

.title {
  font-size: 2rem;
  font-weight: bold;
  letter-spacing: 2px;
}

.el-main {
  padding: 32px 0;
}

.main-card {
  border-radius: 16px;
  box-shadow: 0 4px 24px #dbeafe;
  min-height: 720px;
  background: #fff;
}

.chat-card {
  min-height: 720px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}
</style>